<nz-row>
  <div class="searchItem">
    <label for="date">日期</label>
    <nz-range-picker id="date" nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="queryAppId">应用</label>
    <nz-select id="queryAppId" [(ngModel)]="query.appId" nzPlaceHolder="请选择应用" nzMode="multiple" [nzBackdrop]="true"
               nzShowSearch>
      <nz-option [nzValue]="app.id" [nzLabel]="app.appName" *ngFor="let app of appOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="add()">添加</button>
  <button nz-button nzType="primary" (click)="addMultiple()">批量添加</button>
</nz-row>
<nz-table #basicTable [nzData]="dataCount"
          nzSize="small"
          nzShowSizeChanger
          nzShowPagination="false"
>
  <thead>
  <tr>
    <th nzAlign="center">注册数合计</th>
    <th nzAlign="center">充值金额合计</th>
    <th nzAlign="center">支付通道成本合计</th>
    <th nzAlign="center">厂商分成金额合计</th>
    <th nzAlign="center">我方分成金额合计</th>
    <th nzAlign="center">我方利润合计</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data">
    <td nzAlign="center">{{ data['registerCountSum'] }}</td>
    <td nzAlign="center">{{ data['rechargeAmountSum'] }}</td>
    <td nzAlign="center">{{ data['payCostSum'] }}</td>
    <td nzAlign="center">{{ data['heDivideAmountSum'] }}</td>
    <td nzAlign="center">{{ data['myDivideAmountSum'] }}</td>
    <td nzAlign="center">{{ data['myDivideProfitSum'] }}</td>
  </tr>
  </tbody>
</nz-table>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.current"
  [(nzPageSize)]="query.size"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">日期</th>
    <th nzAlign="center">应用名称</th>
    <th nzAlign="center">公司名称</th>
    <th nzAlign="center">注册数</th>
    <th nzAlign="center">充值金额</th>
    <th nzAlign="center">支付通道比例</th>
    <th nzAlign="center">分成比例</th>
    <th nzAlign="center">支付通道成本</th>
    <th nzAlign="center">厂商分成金额</th>
    <th nzAlign="center">我方分成金额</th>
    <th nzAlign="center">我方利润</th>
    <th nzAlign="center">创建时间</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td nzAlign="center">{{ data['date'] }}</td>
    <td nzAlign="center">{{ data['productName'] }}</td>
    <td nzAlign="center">{{ data['devName'] }}</td>
    <td nzAlign="center">{{ data['registerCount'] }}</td>
    <td nzAlign="center">{{ data['rechargeAmount'] }}</td>
    <td nzAlign="center">{{ data['rate'] }}%</td>
    <td nzAlign="center">{{ data['divideRate'] }}%</td>
    <td nzAlign="center">{{ data['payCost'] }}</td>
    <td nzAlign="center">{{ data['heDivideAmount'] }}</td>
    <td nzAlign="center">{{ data['myDivideAmount'] }}</td>
    <td nzAlign="center">{{ data['myDivideProfit'] }}</td>
    <td nzAlign="center">{{ data['createTime'] }}</td>
    <td nzAlign="center">
      <a (click)="view(data)">查看</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: #F56C6C"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.operationType" (nzOnCancel)="handleModalCancel()"
          [nzMaskClosable]="modal.operationType==='查看'"
          [nzOkLoading]="modal.loading" [nzOkText]="modal.operationType==='查看'?null:'保存'"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="appId"><span>*</span>应用:</label>
      <nz-select id="appId" [(ngModel)]="formData.productId" nzPlaceHolder="请选择应用"
                 [disabled]="modal.operationType==='查看'" [nzBackdrop]="true" nzShowSearch
                 nzAllowClear>
        <nz-option [nzValue]="app.id" [nzLabel]="app.appName" *ngFor="let app of appOptions"></nz-option>
      </nz-select>
    </nz-row>
    <nz-row class="modalRow">
      <label for="formDate"><span>*</span>日期:</label>
      <nz-date-picker id="formDate" [(ngModel)]="formData.date" [disabled]="modal.operationType==='查看'"
                      nzFormat="yyyy-MM-dd"></nz-date-picker>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.registerCount">
      <label for="register">注册数:</label>
      <input id="register" nz-input placeholder="请输入注册数" type="number" [disabled]="modal.operationType==='查看'"
             [maxLength]="16" [(ngModel)]="formData.registerCount"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.rechargeAmount">
      <label for="payAmount">充值金额:</label>
      <input id="payAmount" nz-input placeholder="请输入充值金额" type="number" [disabled]="modal.operationType==='查看'"
             [maxLength]="16" [(ngModel)]="formData.rechargeAmount"/>
    </nz-row>
  </ng-container>
</nz-modal>

<!--批量添加模态框-->
<nz-modal [(nzVisible)]="modalMultiple.modalVisible" [nzTitle]="modalMultiple.operationType"
          (nzOnCancel)="resetFormData()"
          nzWidth="600px"
          [nzMaskClosable]="false"
          [nzOkLoading]="modalMultiple.loading" [nzOkText]="'保存'"
          (nzOnOk)="handleMultipleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label><span>*</span>应用:</label>
      <nz-select [(ngModel)]="modalMultiple.productId" nzPlaceHolder="请选择应用"
                 [disabled]="modalMultiple.operationType==='查看'" [nzBackdrop]="true" nzShowSearch
                 nzAllowClear>
        <nz-option [nzValue]="app.id" [nzLabel]="app.appName" *ngFor="let app of appOptions"></nz-option>
      </nz-select>
    </nz-row>
    <nz-row style="max-height: 524px;overflow: auto;" id="itemList">
      <nz-col nzSpan="12" *ngFor="let data of modalMultiple.data;let index=index"
              style="border-bottom: 1px solid rgba(0,0,0,.1);margin-top: 4px;"
              [ngStyle]="{borderRight: index%2==0?'1px solid rgba(0,0,0,.1)':'',paddingLeft: index%2==0?'':'4px'}">
        <nz-row class="modalRow">
          <label><span>*</span>日期:</label>
          <nz-date-picker [(ngModel)]="data.date" [disabled]="modalMultiple.operationType==='查看'"
                          nzFormat="yyyy-MM-dd"></nz-date-picker>
        </nz-row>
        <nz-row class="modalRow">
          <label>注册数:</label>
          <input nz-input placeholder="请输入注册数" type="number" [maxLength]="16" [(ngModel)]="data.registerCount"/>
        </nz-row>
        <nz-row class="modalRow">
          <label>充值金额:</label>
          <input nz-input placeholder="请输入充值金额" type="number" [maxLength]="16" [(ngModel)]="data.rechargeAmount"/>
        </nz-row>
      </nz-col>
    </nz-row>
    <nz-row class="modalRow"
            style="align-items: center;justify-content: center;color: #1890ff;cursor: pointer;user-select: none;-webkit-user-select: none"
            (click)="addRow()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
    </nz-row>
  </ng-container>
</nz-modal>
